<template>
    
      <ul class="ul">
          <li class="ul-f-a" >&#xe624;</li>
          {{tt()}}
        <mt-badge type="error" class="cds">{{aa}}</mt-badge><li class="ul-f-b">&#xe602;</li>
          <li class="ul-f-c" @click="handelClick"><span>送心意</span></li>
          <li class="ul-f-d"><span @click="handel">购物车</span></li>
       
    
      </ul>
     
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import { Badge } from 'mint-ui';
export default {
  
props:['ab'],
components:{
    'mt-badge':Badge
  },
  data(){
      return {
         aa:''
      }
  },
   methods:{

       handelClick(){
           this.$router.history.push('/cart')
       },
     ...mapMutations(['handelAdd']),
     handel(){
         const newpro = {...this.ab[0],'count': 1,'isChecked':false}
         this.$store.commit('handelAdd',newpro)
     },
     tt(){
    //    const bb = this.cart.map(item=>{
           
    //        return item.count
    //    })
    
       const bb = this.cart.reduce((result,item)=>{
           result+=item.count
           return result
       },0)
   

        this.aa=bb  
     }
  
    
   },
   computed:{
       ...mapState(['cart']),
         
   }
 
}
</script>

<style lang="scss">
@font-face {
  font-family: 'iconfont';  /* project id 930700 */
  src: url('//at.alicdn.com/t/font_930700_2ekrovyec8o.eot');
  src: url('//at.alicdn.com/t/font_930700_2ekrovyec8o.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_930700_2ekrovyec8o.woff') format('woff'),
  url('//at.alicdn.com/t/font_930700_2ekrovyec8o.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_930700_2ekrovyec8o.svg#iconfont') format('svg');
}
    .ul{
        display: flex;
     
        &-f{
            &-a,&-b{
                width: 68px;
                background:#efefef;
                height: 58px;
                text-align: center;
                padding: 20px;
                font-family: 'iconfont';
                color: #428bca;
                font-size:27px;
            }
           &-c
           ,&-d{
               width: 137px;
               height: 52px;
               background: #f06292;
              color: #fff;
              text-align: center;
              padding: 15px;
           } 
        }
    }

   .ul-f-c {
               border-right: 1px solid #919191;
           }
     .cds{
         height: 13px;
    width: 21px;
    position: absolute;
    bottom: 33px;
    left: 118px;
}
           
</style>
